<template>
  <div class="unify-task-detail">
    <div class="detail-title">
      <div class="left">
        <div style="display: flex;flex-direction: column">
          <div>
            <i class="el-icon-arrow-left" style="font-size: 22px;font-weight: 900;cursor:pointer" @click="goBack"></i>
            <span class="task-name">【{{$route.query.name || ''}}】统一编码</span>
          </div>
          <div v-if="rowData" class="detail-info">
            <span>创建人：{{rowData.user}}</span>
            <span>所属单位：{{rowData.unit}}</span>
            <span>创建时间：{{$route.query.createTime || ''}}</span>
            <span>范围：{{$route.query.unit || ''}}</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="card">
          <div class="card-top">
            地址总数
          </div>
          <div class="card-bottom">
            <span class="number">{{total}}</span>
            条
          </div>
        </div>
        <div class="aPartition"></div>
        <div class="card">
          <div class="card-top">
            编码成功
          </div>
          <div class="card-bottom">
            <span class="number">{{total}}</span>
            条
          </div>
        </div>
        <div class="aPartition"></div>
        <div class="card">
          <div class="card-top">
            编码失败
          </div>
          <div class="card-bottom">
            <span class="number">0</span>
            条
          </div>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="handle">
        <el-input v-model="standardAddress" placeholder="统一标准地址" size="small" style="width: 200px">
          <el-button slot="append" icon="el-icon-search" type="primary" @click="queryTable"></el-button>
        </el-input>

      </div>

      <el-table :data="tableData" ref="detaliTable" header-row-class-name="table-header" height="550px" border class="size-table" :span-method="objectSpanMethod">
        <el-table-column align="center" label="序号" fixed="left" type="index"></el-table-column>
        <el-table-column align="center" label="统一地址编码" prop="uniqueCode" fixed="left" width="200"></el-table-column>
        <el-table-column align="center" label="统一地址编码" prop="tydzmc" fixed="left" width="350"></el-table-column>
        <el-table-column align="center" label="省" prop="shengmc"></el-table-column>
        <el-table-column align="center" label="市" prop="shimc"></el-table-column>
        <el-table-column align="center" label="区" prop="qumc"></el-table-column>
        <el-table-column align="center" label="街道" prop="jdmc"></el-table-column>
        <el-table-column align="center" label="社区" prop="sqmc"></el-table-column>
        <el-table-column align="center" label="门牌号" prop="mph"></el-table-column>
        <el-table-column align="center" label="小区" prop="xqmc"></el-table-column>
        <el-table-column align="center" label="建筑物" prop="jzw"></el-table-column>
        <el-table-column align="center" label="楼牌号" prop="ldmc"></el-table-column>
        <el-table-column align="center" label="单元" prop="dyh"></el-table-column>
        <el-table-column align="center" label="楼层" prop="floor"></el-table-column>
        <el-table-column align="center" label="户室" prop="fjhm"></el-table-column>
        <el-table-column align="center" label="编码结果" width="120" fixed="right">
          <template slot-scope="{row}">
            <el-tag :type="row.uniqueCode ? 'success':'error'">{{row.uniqueCode ? '成功':'失败'}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-size="page.size" :total="total" background layout="total,prev, pager, next" style="text-align: right;margin-top: 12px" @current-change="pageChange"></el-pagination>
    </div>
  </div>
</template>

<script>


import { getCodeTaskHandelData } from '@/api/oneCodeAddress'

export default {
  data () {
    return {
      rowData: {
        name: '0',
        user: '李建',
        unit: '省政务服务和数据管理局',
        createTime: '',
        range: '宝塔社区'
      },
      page: {
        page: 1,
        size: 10
      },
      total: 89,
      standardAddress: '',
      tableData: [],
      rowspanMap: {},
    }
  },
  methods: {
    formatterRange (row, column, cellValue, index) {
      return (row.matchingRate * 100).toFixed(2) + '%'
    },
    goBack () {
      this.$router.push('/one-code-access')
    },
    // 页面切换
    pageChange (pageNum) {
      this.page.page = pageNum
      this.queryTable()
    },
    async queryTable () {
      let id = '1806930370806235138'
      const req = {
        ...this.page,
        id
      }
      const res = await getCodeTaskHandelData(req)
      if (res.status === 200) {
        this.tableData = res.data.records
        this.total = res.data.total
      } else {
        this.tableData = []
        this.total = 0
      }
      this.calculateRowspan();
    },
    replaceText (text) {
      return text.replace(/@([^@]*)@/g, function (match, p1) {
        return '<span class="highlight">' + p1 + '</span>';
      });
    },
    calculateRowspan () {
      let map = {};
      let data = this.tableData;
      let currentName = '';
      let rowspan = 1;
      for (let i = 0; i < data.length; i++) {
        if (data[i].tydzmc !== currentName) {
          currentName = data[i].tydzmc;
          rowspan = 1;
          map[i] = rowspan;
        } else {
          map[i - rowspan] = ++rowspan;
          map[i] = 0;
        }
      }
      this.rowspanMap = map;
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 2) {
        return {
          rowspan: this.rowspanMap[rowIndex],
          colspan: this.rowspanMap[rowIndex] > 0 ? 1 : 0
        };
      }
    }
  },
  created () {
    this.queryTable()
  }
}
</script>

<style lang="less">
.highlight {
  color: red;
}
</style>

<style lang="less" scoped>
@import url("../main.less");

.unify-task-detail {
  position: relative;
  height: 100%;
  width: 100%;

  .content {
    width: 100%;
    height: calc(100% - 130px);
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    .handle {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .size-table {
      height: 550px;
      margin: 10px 0;
    }
  }
}
</style>